<template>
    <view class="record">
        <view class="table-box">
            <view class="table-tt">
                <view class="tr flex-box">
                    <view class="td">序号</view>
                    <view class="td">
                        <picker @change="bindPickerChange2" :value="array2.index" :range="array2.list" range-key="name">
                            设备名称
                            <uni-icon type="arrowdown"></uni-icon>
                        </picker>
                    </view>
                    <view class="td">
                        <picker @change="bindPickerChange" :value="array.index" :range="array.list">
                            品名
                            <uni-icon type="arrowdown"></uni-icon>
                        </picker>
                    </view>
                    <view class="td">数量</view>
                    <view class="td" v-if="isPermission2('待检统计--检验')">操作</view>
                </view>
            </view>
            <!-- 滚动固定表头 -->
            <view class="table-tt navTop" v-show="navTop">
                <view class="tr flex-box">
                    <view class="td">序号</view>
                    <view class="td">
                        <picker @change="bindPickerChange2" :value="array2.index" :range="array2.list" range-key="name">
                            设备名称
                            <uni-icon type="arrowdown"></uni-icon>
                        </picker>
                    </view>
                    <view class="td">
                        <picker @change="bindPickerChange" :value="array.index" :range="array.list">
                            品名
                            <uni-icon type="arrowdown"></uni-icon>
                        </picker>
                    </view>
                    <view class="td">数量</view>
                    <view class="td" v-if="isPermission2('待检统计--检验')">操作</view>
                </view>
            </view>
            <view class="table-body">
                <view class="tr flex-box" v-for="(item, index) in table" :key="index">
                    <view class="td">{{ index+1 }}</view>
                    <view class="td">{{ item.equipment_name }}</view>
                    <view class="td">{{ item.goods_name }}</view>
                    <view class="td">{{ item.number }}</view>
                    <view class="td" v-if="isPermission2('待检统计--检验')" ><button class="mini-btn" size="mini" @tap="bindDetection(item.id)">检验</button></view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import {
    uniIcon,
    uniPopup
} from '@dcloudio/uni-ui';
import {
    request
} from "../../../../yaolu-mp/comon/js/request.js"
export default {
    data() {
        return {
            navTop: false,
            maxPage: 0,
            page: 1,
            id: 0,
            popup: false,
            array: {
                list: [],
                index: 0
            },
            array2: {
                list: [],
                index: 0
            },
            table: [{}],
            array2Id: 0,
        };
    },
    onReachBottom() {
        if (this.page < this.maxPage) {
            console.log(132);
            this.upInit();
        } else {
            return null;
        }
    },
    onPageScroll(e) {
        // console.log(e.scrollTop)
        if (e.scrollTop >= 100) {
            if (!this.navTop) {
                this.navTop = true
            }
        } else {
            if (this.navTop) {
                this.navTop = false
            }
        }
    },
    methods: {
        upInit() {
            this.page++
            console.log(this.page)
            this.getMore()
        },
        // 加载更多
        getMore() {
            request({
                url: "v1/stock/checkStock",
                data: {
                    page: this.page
                }
            }).then(res => {
                this.table = this.table.concat(res.data.result.list.data);
            })
        },
        isPermission2(name) {
            let data = uni.getStorageSync("stockPermission2") // 缓存起来的数组
            if (data.length) {
                return data.includes(name)
            }
            return false
        },
        // 品名
        bindPickerChange(e) {
            // console.log(this.array.list[e.target.value])
            // console.log(this.array2.list[e.target.value])
            request({
                url: 'v1/stock/checkStock',
                data: {
                    goods_name: this.array.list[e.target.value],
                    equipment_id: this.array2Id
                }
            }).then(res => {
                console.log(res)
                this.table = res.data.result.list.data
            })
        },
        // 设备id
        bindPickerChange2(e) {
            // console.log(this.array2.list[e.detail.value].id)
            this.array2Id = this.array2.list[e.detail.value].id
            request({
                url: "v1/stock/checkStock",
                data: {
                    goods_name: this.array.list[e.target.value],
                    equipment_id: this.array2Id
                }
            }).then(res => {
                this.table = res.data.result.list.data
            })
        },

        bindDetection(item) {
            request({
                url: "v1/stock/checkStatus",
                method: "POST",
                data: {
                    id: item,
                }
            }).then(res => {
                if (res.statusCode === 200) {
                    uni.showModal({
                        content: "检验成功",
                        showCancel: false,
                        success: function (res) {},

                    });
                    this.getMsg()
                }
            })
        },
        getMsg() {
            request({
                url: "v1/stock/checkStock",
                method: "GET",
                data: {
                    page: this.page
                }
            }).then(res => {
                this.getAll()
                this.maxPage = res.data.result.list.last_page;
                this.table = res.data.result.list.data
                this.array.list = res.data.result.list.data.map(item => {
                    return item.goods_name
                })
                let arrayList = this.array.list

                function newArr(arrayList) {
                    return Array.from(new Set(arrayList))
                }
                this.array.list = newArr(arrayList)
            })
        },
        getAll() {
            request({
                url: "v1/equipment/all"
            }).then(res => {
                console.log(res)
                this.array2.list = res.data.result
            })
        }
    },
    components: {
        uniIcon,
        uniPopup
    },
    onShow() {
        this.getMsg()
    }
};
</script>

<style lang="scss">
.navTop {
    position: fixed;
    top: 0rpx;
    z-index: 99;
    width: 750rpx;
    background: #e4ecf3;
}

.record {
    .tr {}

    .td {
        // flex: 1;
        width: 150rpx;
    }
}
</style>
